import { GridContent } from '@ant-design/pro-components';
import { Menu } from 'antd';
import React, { useLayoutEffect, useRef, useState } from 'react';
import BaseView from './components/base';
import SecurityView from './components/security';
// import BindingView from './components/binding';
// import NotificationView from './components/notification';
import useStyles from './style.style';
type SettingsStateKeys = 'base' | 'security' | 'binding' | 'notification';
type SettingsState = {
    mode: 'inline' | 'horizontal';
    selectKey: SettingsStateKeys;
};

const Account: React.FC = () => {
    const urlParams = new URL(window.location.href).searchParams;
    const defaultMenu = (urlParams.get('m') || 'base') as SettingsStateKeys;

    const { styles } = useStyles();

    const menuMap: Record<string, React.ReactNode> = {
        base: '基本设置',
        security: '安全设置',
        // binding: '账号绑定',
        // notification: '新消息通知',
    };

    const [initConfig, setInitConfig] = useState<SettingsState>({
        mode: 'inline',
        selectKey: defaultMenu,
    });

    const dom = useRef<HTMLDivElement>();

    const resize = () => {
        requestAnimationFrame(() => {
            if (!dom.current) {
                return;
            }
            let mode: 'inline' | 'horizontal' = 'inline';
            const { offsetWidth } = dom.current;
            if (dom.current.offsetWidth < 641 && offsetWidth > 400) {
                mode = 'horizontal';
            }
            if (window.innerWidth < 768 && offsetWidth > 400) {
                mode = 'horizontal';
            }
            setInitConfig({
                ...initConfig,
                mode: mode as SettingsState['mode'],
            });
        });
    };

    useLayoutEffect(() => {
        if (dom.current) {
            window.addEventListener('resize', resize);
            resize();
        }
        return () => {
            window.removeEventListener('resize', resize);
        };
    }, [dom.current]);

    const getMenu = () => {
        return Object.keys(menuMap).map((item) => ({ key: item, label: menuMap[item] }));
    };

    const renderChildren = () => {
        const { selectKey } = initConfig;
        switch (selectKey) {
            case 'base':
                return <BaseView />;
            case 'security':
                return <SecurityView />;
            // case 'binding':
            //     return <BindingView />;
            // case 'notification':
            //     return <NotificationView />;
            default:
                return null;
        }
    };

    return (
        <GridContent>
            <div
                className={styles.main}
                ref={(ref) => {
                    if (ref) {
                        dom.current = ref;
                    }
                }}
            >
                <div className={styles.leftMenu}>
                    <Menu
                        mode={initConfig.mode}
                        selectedKeys={[initConfig.selectKey]}
                        onClick={({ key }) => {
                            setInitConfig({
                                ...initConfig,
                                selectKey: key as SettingsStateKeys,
                            });
                        }}
                        items={getMenu()}
                    />
                </div>
                <div className={styles.right}>
                    <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
                    {renderChildren()}
                </div>
            </div>
        </GridContent>
    );
};

export default Account;